﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddResourceView.aspx.cs"
    Inherits="Demo.Web.Operation.AddResourceView" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        Ext.apply(Ext.form.VTypes, {
            daterange: function (val, field) {
                var date = field.parseDate(val);

                if (field.startDateField && (!date || (!field.dateRangeMax || (date.getTime() !== field.dateRangeMax.getTime())))) {
                    var start = Ext.getCmp(field.startDateField);

                    if (start) {
                        start.setMaxValue(date);
                        field.dateRangeMax = date;
                        start.validate();
                    }
                } else if (field.endDateField && (!date || (!field.dateRangeMin || (date.getTime() !== field.dateRangeMin.getTime())))) {
                    var end = Ext.getCmp(field.endDateField);

                    if (end) {
                        end.setMinValue(date);
                        field.dateRangeMin = date;
                        end.validate();
                    }
                }

                /*
                * Always return true since we're only using this vtype to set the
                * min/max allowed values (these are tested for after the vtype test)
                */
                return true;
            }
        });
    </script>
    <script type="text/javascript">
        var onKeyUp = function (field) {
            //            var v = this.getRawValue(),
            //                field;
            var v = this.processValue(this.getRawValue()), field;
            if (v.length < 1) {

                if (this.startDateField) {
                    field = Ext.getCmp(this.startDateField);
                    field.setMaxValue();
                    this.dateRangeMax = null;
                } else if (this.endDateField) {
                    field = Ext.getCmp(this.endDateField);
                    field.setMinValue();
                    this.dateRangeMin = null;
                }
                field.validate();
            }
            //            if (this.startDateField) {
            //                field = Ext.getCmp(this.startDateField);
            //                //                field.setMaxValue();
            //                //                this.dateRangeMax = null;
            //            } else if (this.endDateField) {
            //                //                field = Ext.getCmp(this.endDateField);
            //                //                field.setMinValue();
            //                //                this.dateRangeMin = null;
            //            }

            //            field.validate();
        };

        var Clear = function () {
            var name = Ext.getCmp('txtResourceType');
            name.setValue('');
            name.clearInvalid();
            name = Ext.getCmp('txtCostoEmpleado');
            name.setValue('');
            name.clearInvalid();
            name = Ext.getCmp('dtDateStartEmployee');
            name.setValue('');
            name.clearInvalid();
            name = Ext.getCmp('dtDateEndEmployee');
            name.setValue('');
            name.clearInvalid();
            name = Ext.getCmp('cboEmployee');
            name.setValue('');
            name.clearInvalid();
            name = Ext.getCmp('txtTecnologyEmployee');
            name.setValue('');
            name.clearInvalid();
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:FormPanel Frame="true" ID="pnResources" runat="server" Layout="AnchorLayout"
            AnchorHorizontal="100%" BodyPadding="10" Header="false">
            <Items>
                <ext:FieldContainer runat="server" FieldLabel="Empleado" AnchorHorizontal="100%"
                    Layout="AnchorLayout">
                    <Items>
                        <ext:ComboBox ID="cboEmployee" runat="server" DisplayField="Name" ValueField="Id"
                            TypeAhead="false" AnchorHorizontal="46%" PageSize="10" HideBaseTrigger="true"
                            MinChars="1" BlankText="Recurso es Requerido" AllowBlank="false" IsRemoteValidation="true">
                            <ListConfig LoadingText="Searching..." ID="ListConfig1">
                                <ItemTpl ID="ItemTpl2" runat="server">
                                    <Html>
                                        <div class="search-item">
							                 <h3><span>{Id}</span>{Name}</h3>						     
						                    </div>
                                    </Html>
                                </ItemTpl>
                            </ListConfig>
                            <Store>
                                <ext:Store ID="Store2" runat="server" AutoLoad="false">
                                    <Proxy>
                                        <ext:AjaxProxy Url="../Common/Resource.ashx">
                                            <ActionMethods Read="POST" />
                                            <Reader>
                                                <ext:JsonReader Root="resources" TotalProperty="total" />
                                            </Reader>
                                        </ext:AjaxProxy>
                                    </Proxy>
                                    <Model>
                                        <ext:Model ID="Model2" runat="server">
                                            <Fields>
                                                <ext:ModelField Name="Id" />
                                                <ext:ModelField Name="Name" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <DirectEvents>
                                <Select OnEvent="cboEmployee_SelectChange">
                                </Select>
                            </DirectEvents>
                            <RemoteValidation OnValidation="ValidationResource"  ValidationEvent="select" EventOwner="Field"/>
                        </ext:ComboBox>
                    </Items>
                </ext:FieldContainer>
                <ext:FieldContainer runat="server" AnchorHorizontal="100%" Layout="AnchorLayout">
                    <Items>
                        <ext:TextField ID="txtResourceType" runat="server" FieldLabel="Tipo de Recurso" Width="200" />
                        <ext:TextField ID="txtCostoEmpleado" runat="server" FieldLabel="Costo" Width="200" />
                        <ext:TextArea ID="txtTecnologyEmployee" AnchorHorizontal="50.3%" Rows="3" AutoScroll="true"
                            runat="server" FieldLabel="Tecnologia" />
                    </Items>
                </ext:FieldContainer>
                <ext:FieldContainer runat="server" Layout="HBoxLayout">
                    <Defaults>
                        <ext:Parameter Name="margins" Value="0 5 0 0" Mode="Value" />
                    </Defaults>
                    <Items>
                        <ext:DateField ID="dtDateStartEmployee" runat="server" Editable="false" Vtype="daterange"
                            EndDateField="dtDateEndEmployee" EnableKeyEvents="true" FieldLabel="Fecha Inicio"
                            PickerAlign="tl-bl" PickerOffset="0,-180" BlankText="Fecha Inicio es Requerida"
                            AllowBlank="false">
                            <Listeners>
                                <KeyUp Fn="onKeyUp" />
                            </Listeners>
                        </ext:DateField>
                        <ext:DateField ID="dtDateEndEmployee" runat="server" Editable="false" Vtype="daterange"
                            StartDateField="dtDateStartEmployee" EnableKeyEvents="true" FieldLabel="Fecha Fin"
                            PickerAlign="tl-bl" PickerOffset="0,-180" BlankText="Fecha Fin es Requerida"
                            AllowBlank="false">
                            <Listeners>
                                <KeyUp Fn="onKeyUp" />
                            </Listeners>
                        </ext:DateField>
                    </Items>
                </ext:FieldContainer>
                <ext:FieldContainer runat="server" Layout="HBoxLayout">
                    <Defaults>
                        <ext:Parameter Name="margins" Value="0 5 0 0" Mode="Value" />
                    </Defaults>
                    <Items>
                    </Items>
                </ext:FieldContainer>
            </Items>
            <Listeners>
                <ValidityChange  Handler="#{btnSave}.setDisabled(!valid);" />
            </Listeners>
            <Buttons>
                <ext:Button ID="btnSave" runat="server" Text="Save" Icon="Disk">
                    <DirectEvents>
                        <Click OnEvent="BtnSave_Click">
                        </Click>
                    </DirectEvents>
                </ext:Button>
                <ext:Button ID="btnClean" runat="server" Text="Limpiar" Icon="Cancel">
                    <Listeners>
                        <Click Fn="Clear" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:FormPanel>
    </div>
    </form>
</body>
</html>
